<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>购物车</title>
    <link rel="stylesheet" href="css/header.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/content.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/footer.css" media="screen" title="no title" charset="utf-8">
  </head>
  <style media="screen">
  * {
    padding: 0;
    margin: 0;
  }
  body{
    background: rgb(243, 243, 243);
  }
    .listbody{
      width: 1100px;
      /*height: 100px;*/
      /*border: 1px solid gray;*/
      margin: auto;
    }
    table{
      border-collapse: collapse;
      background: rgb(252, 252, 252);
    }
    .goodsname{
      display: inline-block;
      text-decoration: none;
      vertical-align: top;
      margin-top: 36px;
      margin-left: 20px;
      width: 380px;
      color: black;
    }
    .cart-order{
      border: 1px solid lightgray;
      height: 120px;
    }
    .buynumbox{
      /*border: 1px solid gray;*/
      display: inline-block;
      height: 20px;
      line-height: 20px;

    }

    .total {
      display: block;
      height: 50px;
      border: 1px solid lightgray;
    }
    .total span, .total a{
      text-decoration: none;
      line-height: 50px;
      color: black;
    }
    .topay{
      display: inline-block;
      width: 200px;
      height: 50px;
      background: green;
      font-size: 18px;
      font-weight: bold;
      /*border-radius: 5px;*/
    }
  </style>
  <body>
    <div class="header">
        <div class="head">
            <ul class="firstHead">
                <li><a href="index.html" target="_blank">波奇首页</a></li>
                <li><a href="shop.html" target="_blank">波奇商城</a></li>
                <li><a href="serve.html" target="_blank">波奇服务</a></li>
                <li><a href="message.html" target="_blank">波奇论坛</a></li>
                <li><a href="cyclopedia.html" target="_blank">宠物百科</a></li>
            </ul>
            <ul class="attention">
                <li><a href="#">关注我们<span><img src="" alt="" /></span></a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#"><span><img src="" alt="" /></span>收藏</a></li>
            </ul>
            <ul class="register">
                <li><a href="login.html" target="_blank">登陆</a></li>
                <li><a href="script:;">|</a></li>
                <li><a href="register.html" target="_blank">免费注册</a></li>
            </ul>
            <ul class="userLogin">
                <li>
                    <a href="script:;" id="userName"></a>
                </li>
                <li>|</li>
                <li><a href="script:;" id="quit">退出</a></li>
            </ul>

        </div>
    </div>
    <div class="navigation">
        <div class="logo">
            <img src="source/images/logo.png" alt="" />
        </div>
        <div class="serch">
          <input type="text" id="keyword"name="name" value="" placeholder="请输入关键字">
          <img id="search"src="source/images/ind_sch.png" alt="" />
        </div>
        <div class="app">
            <a href="#"><img src="source/images/logo.png" alt="" /></a>
        </div>
    </div>
    <div class="top_nav">
        <div class="nav_wrap">
            <div class="nav_left">
                <a href="script:;"><span>全部商品分类</span></a>
                <a href="script:;"><em></em></a>
            </div>
            <div class="nav_middle">
                <a href="shop.html" class="homePage">首页</a>
                <a href="shop.html#dog">狗狗</a>
                <a href="shop.html#cat">猫猫</a>
                <a href="shop.html#spet">小宠</a>
                <a href="shop.html#fish">水族</a>
                <a href="shop.html#reptile">爬虫</a>
                <a href="serve.html" target="_blank">波奇服务</a>
            </div>
            <div class="nav_right">
                <div class="shop_right" id = "shoplist">
                    <div class="shop_text">
                        <em></em>
                        <a href="script:;">购物车</a>
                    </div>
                    <span id="sumnum"></span>
                </div>

            </div>
        </div>
    </div>
    <div class="listbody">


    </div>
    <div class="ensure" style="margin-top:20px;">
        <div class="ensure_img">
            <img src="source/images/ensure.png" alt="" />
        </div>
    </div>
    <div class="footer">
        <ul>
            <li><a href="#">关于我们</a></li>|
            <li><a href="#">友情链接</a></li>|
            <li><a href="#">诚聘英才</a></li>|
            <li><a href="#">联系我们</a></li>|
            <li><a href="#">网站地图</a></li>|
            <li><a href="#">意见反馈</a></li>|
            <li><a href="#">帮助中心</a></li>|
            <li><a href="#">客服热线：123456789</a></li>
        </ul>
        <p>
            Copyright © 2007-2016 Boqii.com All Rights Reserved 光橙（上海）信息科技有限公司 版权所有 沪ICP备13034501号-2 增值电信业务经营许可证：沪B2-20140120
        </p>
    </div>
  </body>
</html>
<script type="text/javascript">

var register = document.getElementsByClassName("register")[0];
var userLogin =document.getElementsByClassName("userLogin")[0];
var userName = document.getElementById("userName");
var quit = document.getElementById("quit");
readStorage();
setInterval(readStorage,2000);
//读取storage的数据
function readStorage(){
  console.log(111);
  var storage = window.localStorage;
  if (typeof(storage["user"])=='undefined') {
    register.style.display ="inline-block";
    userLogin.style.display = "none";
     return false;
  }else if(storage["user"]==""){
    register.style.display ="inline-block";
    userLogin.style.display = "none";
     return false;
  }else {
    var myDate =  new Date();
    var currenTime = myDate.getTime();
    if (currenTime >= Number(storage["userTime"])+3600000) {
      storage["user"] =="";
    }else {
        register.style.display ="none";
        userLogin.style.display = "inline-block";
        userName.innerText = storage["user"];
    }

  }
}

quit.onclick = function (){
  var storage = window.localStorage;
  register.style.display ="inline-block";
  userLogin.style.display = "none";
  storage["user"] = "";
}


var storage = window.localStorage;
var user = storage.user;
console.log(user);
var password = storage.password;
var listbody = document.getElementsByClassName("listbody")[0];
var XMLHttp
if (window.ActiveXObject) {
  XMLHttp = new ActiveXObject('Microsoft.XMLHTTP');
}else{
  XMLHttp = new XMLHttpRequest();
}
  var url = "php/selelist.php?username="+user;
  // console.log(url);
XMLHttp.open('get',url,true);
XMLHttp.send(null);
XMLHttp.onreadystatechange = function () {
  if (XMLHttp.readyState == 4) {
    if (XMLHttp.status == 200) {
      if (XMLHttp.response) {
        console.log(XMLHttp.response);

      obj = JSON.parse(XMLHttp.response);
      // console.log(obj);
        var j = 0;
        // console.log(j);
        objbody = JSON.parse(obj[j]);
        id = objbody.id;
        num = objbody.num;
        console.log(id,num);
        url = "php/show.php?id="+id;
        // console.log(url);
        var pricetotal = 0;
        var sumnum = 0;
        XMLHttp.open('get',url,true);
        XMLHttp.send(null);
        XMLHttp.onreadystatechange = function () {
          if (XMLHttp.readyState == 4) {
            if (XMLHttp.status == 200) {

              var goodsobj = JSON.parse(XMLHttp.response);
              // console.log(goodsobj);
              // console.log(num);
              var list = document.createElement("table");
              list.index = id;
              list.price = goodsobj.thisprice*num;
              list.count = num;
              console.log(list.index);
              list.innerHTML='<tr class="cart-order"><td width="50" align="center"><input autocomplete="off" class="check" checked="checked" type="checkbox" name="" onclick="check"></td><td width="550" valign="middle"><a href="show.html?'+id+'" style="display:inline-block" target="_blank"><img src="'+goodsobj.imgurl1+'" width="80"></a><a href="show.html?'+id+'" target="_blank" class="goodsname">'+goodsobj.name+'</a></td><td width="100" align="center" valign="middle" style=""><span class="buynumbox">数量：'+num+'&nbsp&nbsp&nbsp件</span></td><td width="200" align="center" class="price">¥'+goodsobj.thisprice*num+'</td><td width="200" align="center"><a href="#"  class="delbtn">[删除]</a></td></tr>'
              listbody.appendChild(list);

              var delbtn = document.getElementsByClassName("delbtn");
              for (var i = 0; i < delbtn.length; i++) {
               delbtn[i].onclick=function () {
                 delid = event.target.parentNode.parentNode.parentNode.parentNode.index;
                 url = "php/del.php?id="+delid;
                 //  console.log(event.target.index);
                 console.log(url);
                 XMLHttp.open('get',url,true);
                 XMLHttp.send(null);
                 setTimeout(window.location.reload(),1000);
               }
              }//删除订单
              sumnum+= Number(num);
              pricetotal += goodsobj.thisprice*num;
              j++;
              if (j<obj.length) {
                var objbody = JSON.parse(obj[j]);
                id = objbody.id;
                num = objbody.num;
                url = "php/show.php?id="+id;
                XMLHttp.open('get',url,true);
                XMLHttp.send(null);

              }else{
                var sum = document.createElement("table");
                sum.style = "margin-top: 50px;";
                sum.innerHTML = '<tr class="total"><td width="100" align="center"><input autocomplete="off" id="checkall" checked="checked" type="checkbox" name="" onclick="check"><span>全选</span></td><td width="450" valign="middle"><a href="#" id="deluserlist">清空购物车</a></td><td width="200" align="center" valign="middle" style=""><span>一共选中 <b id="goodsum">'+sumnum+'</b> 件商品</span></td><td width="150" align="center" class="price">总价：<span  style="color:red">¥<b id="pricesum">'+pricetotal+'</b></span></td><td width="200" align="center"><a href="#" onclick="" style="color: white;" class="topay">去结算</a></td></tr>';
                listbody.appendChild(sum);
                var sumbody = document.getElementById("sumnum");
                sumbody.innerText = sumnum;
                var deluserlist = document.getElementById("deluserlist");

                var checkall = document.getElementById("checkall");
                var check = document.getElementsByClassName("check");
                var goodsum = document.getElementById("goodsum");
                var pricesum = document.getElementById("pricesum");
                checkall.onclick=function () {
                  for (var i = 0; i < check.length; i++) {
                    check[i].checked = checkall.checked;
                  }
                  console.log(checkall.checked);
                  if (checkall.checked) {
                    goodsum.innerText = sumnum;
                    pricesum.innerText = pricetotal;
                  }else {
                    goodsum.innerText = 0;
                    pricesum.innerText = 0;
                  }
                }
                for (var i = 0; i < check.length; i++) {
                  check[i].onclick =function () {
                    if (event.target.checked) {
                      goodsum.innerText = Number(goodsum.innerText)+Number(event.target.parentNode.parentNode.parentNode.parentNode.count);
                      pricesum.innerText = Number(pricesum.innerText) + event.target.parentNode.parentNode.parentNode.parentNode.price;
                    }else {
                      goodsum.innerText = Number(goodsum.innerText)-event.target.parentNode.parentNode.parentNode.parentNode.count;
                      pricesum.innerText = Number(pricesum.innerText) - event.target.parentNode.parentNode.parentNode.parentNode.price;
                    }
                  }
                }

                deluserlist.onclick=function () {
                  console.log(11);
                  url = "php/delall.php?username="+user;
                  XMLHttp.open('get',url,true);
                  XMLHttp.send();
                  setTimeout(window.location.reload(),1000);

                }
              }
            }
          }
        }
      }else {
        var div=document.createElement("div");
        div.innerHTML = '<div style="width: 100%;height:260px;margin:auto;border:1px solid lightgray;text-align:center;background:rgb(225,225,225);margin-top:20px;"><img src="source/images/shopcar.png" height="25" style="position:relative;top:5px;" alt="" /><span style="font-size:20px;line-height:150px;text-align:center;">您的购物车还是空的，赶紧给爱宠挑点什么吧！</span><a href="shop.html" style="display:block;margin:auto;width:100px;height:40px;background:rgb(255,102,85);color:white;text-align:center;line-height:40px;font-size:18px;text-decoration:none;">返回首页</a></div>'
        listbody.appendChild(div);
      }

    }
  }
}

var keyword = document.getElementById("keyword");
var search = document.getElementById("search");
search.onclick = function () {
  if (!keyword.value) {
    keyword.focus();
  }else{
    window.open('wares.html?'+keyword.value);
  }
}




</script>
